<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>

<body>
    <button>动画</button>
    <div class="box" style="left:0px"></div>
    <script type="text/javascript">
        var btn = document.getElementsByTagName("button")[0];
        var div = document.getElementsByTagName("div")[0];

        //闪动
        //btn.onclick = function(){
        //    div.style.left = "500px";
        //}
        //匀速运动
        btn.onclick = function() {
            //定时器，每隔一定的时间向右走一些
            setInterval(function() {
                console.log(parseInt(div.style.left));
                //动画原理，盒子未来的位置 = 盒子现在的位置+步长；
                //style.left赋值，用offsetLeft获取值。
                div.style.left = div.offsetLeft + 100 + "px";
                //div.style.left = parseInt(div.style.left)+10+"px";
            }, 500);
        }
    </script>
</body>

</html>